<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米有品</title>
    <!-- 引入js文件 -->
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/xiaomi.css">
</head>
<body>
    <header class="top">
        <div class="nav-top">
            <span class="words">有品</span>
            <img src="./img/7.png" alt="">
            <input class="ipt" type="text" placeholder="搜一搜">
        </div>
         <!-- 轮播图 -->
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./img/1.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/2.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/3.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/4.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/5.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/6.png" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    </header>
    <main class="main"> 
        <div class="icon">
            <ul>
                <div class="box">
                    <a href="./details.html"><img src="./img/01.png" alt=""></a>
                    <p>上新精选</p>
                </div>
                <div class="box">
                    <a href="./crowd.html"><img src="./img/02.png" alt=""></a>
                    <p>小米众筹</p>
                </div>
                <div class="box">
                    <img src="./img/03.png" alt="">
                    <p>有品秒杀</p>
                </div>
                <div class="box">
                    <a href="./life.html"><img src="./img/04.png" alt=""></a>
                    <p>生活优选</p>
                </div>
                <div class="box">
                    <img src="./img/05.png" alt="">
                    <p>小米自营</p>
                </div>
            </ul>
        </div>
        <div class="picture">
            <img src="./img/jt.png" alt="">
        </div>
        <div class="item">
            <div class="item-box">
                <img src="./img/s2.png" alt="">
                <p>抽奖好礼</p>
                <button>乐享好时光</button>
            </div>
            <div class="item-box">
                <img src="./img/s1.png" alt="">
                <p>人到香自来</p>
                <button>感应喷香机</button>
            </div>
            <div class="item-box">
                <img src="./img/s3.png" alt="">
                <p>新品闪降</p>
                <button>iPad Air</button>
            </div>
            <div class="item-box">
                <img src="./img/s4.png" alt="">
                <p>触肤启动</p>
                <button>浮动刀网</button>
            </div>
        </div>
        <div class="crowd">
            <div class="youpin">
                <a href="#">小米有品众筹</a>
                <button class="youpin-btn">1元支持</button>
                <span>6款众筹中></span>
            </div>
            <div class="zy">
                <img src="./img/zy.png" alt="">
            </div>
        </div>
        <div class="selected">
            <div class="selecteds">
                <h4>上新精选</h4>
                <span class="gd">更多></span>
            </div>
        </div>
        <div class="contant">
            <div class="contants">
                <img src="./img/m1.png" alt="">
                 <h4>黑鲨冰封散热背夹</h4>
                 <p>极速制冷/静音无扰</p>
            </div>
            <div class="contants">
                <img src="./img/m2.png" alt="">
                 <h4>五粮液商务五粮醇</h4>
                 <p>升级版五粮醇，设计高端</p>
            </div>
            <div class="contants">
                <img src="./img/m3.png" alt="">
                 <h4>无线双控屏幕挂灯</h4>
                 <p>4线控光 双控多模  </p>
            </div>
            <div class="contants">
                <img src="./img/m4.png" alt="">
                 <h4>米家冷热饮水机</h4>
                 <p>爽口冷水，3秒即热</p>
            </div>
        </div>
        <div class="recommend">
            <div class="recommends">
                <h4>为你推荐</h4>
                <span class="gds">更多></span>
            </div>
        </div>
        <div class="weini">
            <div class="items">
                <img src="./img/w1.png" alt="">
                 <h4>新疆天山营养好奶，口口浓香</h4>
                 <p class="dz">有品定制天润牛奶</p>
                 <p class="monely">￥44.9起</p>
            </div>
            <div class="items">
                <img src="./img/w2.png" alt="">
                 <h4>本色竹浆|柔韧不断</h4>
                 <p class="dz">柚家卷纸48卷装</p>
                 <p class="monely">￥14.9起</p>
            </div>     
            <div class="items">
                <img src="./img/w3.png" alt="">
                 <h4>适用于小米净水器500G</h4>
                 <p class="dz">反渗透滤网500G</p>
                 <p class="monely">￥199起</p>
            </div>
            <div class="items">
                <img src="./img/w4.png" alt="">
                 <h4>米家洗手机专业泡沫洗手液</h4>
                 <p class="dz">泡沫洗手液</p>
                 <p class="monely">￥39.9起</p>
            </div>
            <div class="items">
                <img src="./img/w5.png" alt="">
                 <h4>一键开启安全锁扣</h4>
                 <p class="dz"> Tritan运动杯</p>
                 <p class="monely">￥25.9起</p>
            </div>
            <div class="items">
                <img src="./img/w6.png" alt="">
                 <h4>情侣四面弹T桖</h4>
                 <p class="dz">有品定制天润牛奶</p>
                 <p class="monely">￥49</p>
            </div>
            <div class="items">
                <img src="./img/w7.png" alt="">
                 <h4>母婴使用|EDI纯水</h4>
                 <p class="dz">有品定制天润牛奶</p>
                 <p class="monely">￥44.9起</p>
            </div>
            <div class="items">
                <img src="./img/w8.png" alt="">
                 <h4>日本吾诺男士洗面奶</h4>
                 <p class="dz">资生堂男士洗面奶</p>
                 <p class="monely">￥29起</p>
            </div>
            <div class="items">
                <img src="./img/w9.png" alt="">
                 <h4>低水压可用一键止水</h4>
                 <p class="dz">欧普增压手持花洒</p>
                 <p class="monely">￥23.9起</p>
            </div>
            <div class="items">
            <img src="./img/w2.png" alt="">
                <h4>本色竹浆|柔韧不断</h4>
                <p class="dz">柚家卷纸48卷装</p>
                <p class="monely">￥14.9起</p>
            </div>
            <div class="items">
                <img src="./img/w6.png" alt="">
                 <h4>新疆天山营养好奶，口口浓香</h4>
                 <p class="dz">有品定制天润牛奶</p>
                 <p class="monely">￥44.9起</p>
            </div>
            <div class="items">
                <img src="./img/w3.png" alt="">
                 <h4>新疆天山营养好奶，口口浓香</h4>
                 <p class="dz">有品定制天润牛奶</p>
                 <p class="monely">￥44.9起</p>
            </div>
            <div class="items">
                <img src="./img/w5.png" alt="">
                 <h4>新疆天山营养好奶，口口浓香</h4>
                 <p class="dz">有品定制天润牛奶</p>
                 <p class="monely">￥44.9起</p>
            </div>
            <div class="items">
            <img src="./img/w8.png" alt="">
                <h4>本色竹浆|柔韧不断</h4>
                <p class="dz">柚家卷纸48卷装</p>
                <p class="monely">￥14.9起</p>
            </div>
            <div class="items">
                <img src="./img/w4.png" alt="">
                 <h4>米家洗手机专业泡沫洗手液</h4>
                 <p class="dz">泡沫洗手液</p>
                 <p class="monely">￥39.9起</p>
            </div>
            <div class="items">
                <img src="./img/w8.png" alt="">
                <h4>本色竹浆|柔韧不断</h4>
                <p class="dz">柚家卷纸48卷装</p>
                <p class="monely">￥14.9起</p>
            </div>
        </div>
        <div class="more">
            <p class="morelite">—————更多好物，敬请期待—————</p>
        </div>
    </main>
    <footer class="footer">
        <div class="foot-nav">
            <img src="./img/001.png" alt="">
            <p>首页</p>
        </div>
        <div class="foot-nav">
            <img src="./img/002.png" alt="">
            <p>分类</p>
        </div>
        <div class="foot-nav">
            <img src="./img/003.png" alt="">
            <p>购物车</p>
        </div>
        <div class="foot-nav">
            <img src="./img/004.png" alt="">
            <p>我的</p>
        </div>
        
    </footer>
    <!-- 引入swiper js文件 -->
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="./js/xiaomi.js"></script>
</body>
</html>